<template>
  <div id="flight-orders">
    <div class="card">
      <div class="card-body">
        <form class="" id="frmSearch">
          <input
            type="hidden"
            id="frmSearch_sc_pageNo"
            name="sc.pageNo"
            v-model="sc.pageNo"
          />
          <input
            type="hidden"
            id="frmSearch_sc_pageSize"
            name="sc.pageSize"
            v-model="sc.pageSize"
          />

          <my-date-picker
            id="beginDate"
            v-model="beginDate"
            name="sc.beginDate"
            placeholder="开始日期"
          ></my-date-picker>
          <my-date-picker
            id="endDate"
            v-model="endDate"
            name="sc.endDate"
            placeholder="截止日期"
          ></my-date-picker>
          <input
            type="textfield"
            class="form-control ms-1"
            size="12"
            placeholder="出票单ID"
            v-model.trim="orderId"
          />
          <button
            type="button"
            class="btn btn-primary ms-2"
            @click.stop="search()"
          >
            查找
          </button>
          <button
            type="button"
            class="btn btn-secondary btn-sm ms-2"
            @click.stop="reset()"
          >
            重置
          </button>

          <span class="ms-auto">
            <button
              type="button"
              class="btn btn-info btn-sm"
              @click.stop="download()"
            >
              下载
            </button>
            <button
              type="button"
              class="btn btn-danger btn-sm ms-3"
              @click.stop="refreshBottomPrice()"
              :disabled="priceRefreshing"
            >
              <template v-if="priceRefreshing"> 进价刷新中... </template>
              <template v-else> 刷新进价 </template>
            </button>
          </span>
        </form>
      </div>
    </div>
    <table class="table table-sm table-striped table-hover small">
      <thead>
        <th>日期</th>
        <th>订单号</th>
        <th>pnrno</th>
        <th>psgname</th>
        <th>票号</th>
        <th>class</th>
        <th>dtime</th>
        <th>aport</th>
        <th>flightNo</th>
        <th>flightNo</th>
        <th>cost</th>
        <th>税</th>
        <th>燃油费</th>
        <th>进价</th>
        <th>操作员</th>
        <th>出票点</th>
      </thead>
      <tbody>
        <template v-for="info in dataList">
          <tr :key="info.id">
            <td>{{ info.createDate }}</td>
            <td>{{ info.orderId }}</td>
            <td>{{ info.pnrNo }}</td>
            <td>{{ info.psgName }}</td>
            <td>{{ info.airlineCode }}-{{ info.ticketNo }}</td>
            <td>{{ info.subClass }}/{{ info.cabinClass }}</td>
            <td>{{ info.dtime }}</td>
            <td>{{ info.dport }}</td>
            <td>{{ info.aport }}</td>
            <td>{{ info.flightNo }}</td>
            <td>{{ info.cost }}</td>
            <td>{{ info.tax }}</td>
            <td>{{ info.oilFee }}</td>
            <td>
              <a
                href="javascript:void(0)"
                @click.stop="updatePurchasePrice(info.id)"
              >
                {{ info.purchasePrice }}
              </a>
            </td>
            <td>
              <a
                href="javascript:void(0)"
                @click.stop="updateOperator(info.id)"
              >
                {{ info.operator }}
                <template v-if="info.operator === null || info.operator === ''"
                  ><small>修改</small></template
                >
              </a>
            </td>
            <td>
              <a
                href="javascript:void(0)"
                @click.stop="updateTicketAgency(info.id)"
              >
                {{ info.ticketAgency }}
                <template
                  v-if="info.ticketAgency === null || info.ticketAgency === ''"
                  ><small>修改</small></template
                >
              </a>
            </td>
          </tr>
        </template>
      </tbody>
    </table>

    <nav id="pagination-box" class="float-end">
      <my-pagination
        name="pagination"
        :row-count="sc.rowCount"
        :page-total="sc.pageTotal"
        :page-no="sc.pageNo"
        @next-page="nextPage"
        @prev-page="prevPage"
        @direct-page="directPage"
      ></my-pagination>
    </nav>

    <my-modal-prompt ref="modalPrompt" :nullable="modalNullable">
      <span slot="title">{{ modalTitle }}</span>
    </my-modal-prompt>
  </div>
</template>

<script>
import { APP_FLIGHT_PATH } from "@/common/common.js";
import {
  searchTbookingTickets,
  updateTicketPurchasePrice,
  updateTicketOperator,
  updateTicketTicketingAgency,
  refreshBottomPrice,
} from "@/api/tbooking.js";
import MyDatePicker from "@/components/my-datepicker.vue";
import MyPagination from "@/components/my-pagination.vue";
import MyModalPrompt from "@/components/modal/my-modal-prompt.vue";

export default {
  components: {
    MyModalPrompt,
    MyDatePicker,
    MyPagination,
  },
  data() {
    return {
      dataList: [],

      sc: {
        rowCount: 0,
        pageNo: 1,
        pageSize: 25,
        pageTotal: 0,
      },

      beginDate: "",
      endDate: "",
      orderId: "",
      priceRefreshing: false,

      modalTitle: "",
      modalNullable: false,
    };
  },
  mounted: function () {
    this.search();
  },
  methods: {
    showErrMsg: function (msg, msgType) {
      this.$store.dispatch("showAlertMsg", {
        errMsg: msg,
        errMsgType: msgType,
      });
    },
    showLoading: function (loadingText) {
      this.$store.commit("showLoading", {
        loading: true,
        loadingText: loadingText,
      });
    },
    hideLoading: function () {
      this.$store.commit("showLoading", { loading: false });
    },
    search: function () {
      let newOrderId = parseInt(this.orderId);
      console.log(newOrderId);
      if (isNaN(newOrderId)) {
        newOrderId = 0;
      }
      const params = {
        "sc.pageNo": this.sc.pageNo,
        "sc.pageSize": this.sc.pageSize,
        "sc.beginDate": this.beginDate,
        "sc.endDate": this.endDate,
        "sc.orderId": newOrderId,
      };
      this.showLoading();
      searchTbookingTickets(
        params,
        (jsonResult) => {
          this.dataList = jsonResult.dataList;
          this.sc = jsonResult.page;
        },
        () => {
          this.hideLoading();
        }
      );
    },
    download: function () {
      const params =
        "sc.pageNo=" +
        this.sc.pageNo +
        "&sc.pageSize=" +
        this.sc.pageSize +
        "&sc.beginDate=" +
        this.beginDate +
        "&sc.endDate=" +
        this.endDate;

      const url =
        APP_FLIGHT_PATH + "/order/tbooking/tickets/download?" + params;
      window.open(url);
    },
    updatePurchasePrice: function (id) {
      const remark = window.prompt("请输入采购价：", "");
      if (remark === null) {
        return;
      } else if (remark === "") {
        this.showErrMsg("请输入采购价");
        return;
      }

      const params = {
        price: remark,
      };

      updateTicketPurchasePrice(id, params, (jsonResult) => {
        this.commonShowMessage(jsonResult);
      });
    },
    updateOperator: function (id) {
      const remark = window.prompt("请输入操作员：", "");
      if (remark === null) {
        return;
      } else if (remark === "") {
        this.showErrMsg("请输入操作员：");
        return;
      }

      const params = {
        operator: remark,
      };

      updateTicketOperator(id, params, (jsonResult) => {
        this.commonShowMessage(jsonResult);
      });
    },
    updateTicketAgency: function (id) {
      const remark = window.prompt("请输入出票点：", "");
      if (remark === null) {
        return;
      } else if (remark === "") {
        this.showErrMsg("请输入出票点：");
        return;
      }

      const params = {
        agency: remark,
      };

      updateTicketTicketingAgency(id, params, (jsonResult) => {
        this.commonShowMessage(jsonResult);
      });
    },
    reset: function () {
      this.sc.pageNo = 1;
      this.sc.beginDate = "";
      this.sc.endDate = "";
      this.orderId = "";
    },
    prevPage: function () {
      this.sc.pageNo = this.sc.pageNo - 1;
      if (this.sc.pageNo < 1) this.sc.pageNo = 1;
      this.search();
    },
    nextPage: function () {
      this.sc.pageNo = this.sc.pageNo + 1;
      this.search();
    },
    directPage: function (pageNo) {
      this.sc.pageNo = pageNo;
      this.search();
    },
    commonShowMessage: function (jsonResult) {
      if (jsonResult.status !== "OK") {
        this.showErrMsg("失败：" + jsonResult.errmsg);
      } else {
        if (jsonResult.desc !== "") {
          this.showErrMsg(jsonResult.desc);
        } else {
          this.showErrMsg("操作成功");
        }
        this.search();
      }
    },
    refreshBottomPrice: function () {
      this.modalTitle =
        "为缓解服务器压力，系统将只更新5天内票号的进价，请知晓！";
      this.$refs.modalPrompt
        .modal("YesOrNo")
        .then((remark) => {
          this.doRefreshBottomPrice();
        })
        .catch((ex) => {});
    },
    doRefreshBottomPrice: function () {
      this.priceRefreshing = true;
      refreshBottomPrice(
        (v) => {
          if (v.status === "OK") {
            this.showErrMsg(v.desc);
          } else {
            this.showErrMsg(v.errmsg, "danger");
          }
        },
        () => {
          this.priceRefreshing = false;
        }
      );
    },
  },
};
</script>